<template>
  <div class="dialog_main">
    <div class="dialog_header">
      <span></span>
      <span @click="appStore.login" style="cursor: pointer">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-guanbi"></use>
        </svg>
      </span>
    </div>
    <!-- 登录 -->
    <div class="login" v-show="!appStore.isShowRegisterInput">
      <div class="input_user">
        <input
          type="text"
          placeholder="邮箱"
          autocomplete="close"
          v-model="loginUser.user_email"
        />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <div class="input_user">
        <input
          type="password"
          placeholder="密码"
          v-model="loginUser.user_password"
        />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <div class="footer">
        <span @click="appStore.register">去注册</span>
        <button class="submit" @click="login">登录</button>
      </div>
    </div>
    <!-- 注册 -->
    <div class="register" v-show="appStore.isShowRegisterInput">
      <div class="input_user">
        <input
          v-model="registerUser.user_email"
          type="text"
          placeholder="邮箱"
          autocomplete="close"
          class="input"
        />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <div class="email">
        <div>
          <input
            type="number"
            placeholder="验证码"
            v-model="registerUser.code"
          />
          <span class="bottom"></span>
          <span class="right"></span>
          <span class="top"></span>
          <span class="left"></span>
        </div>

        <button @click="sendMessage" class="send">发送</button>
      </div>
      <div class="input_user">
        <input
          type="password"
          placeholder="密码"
          class="input"
          v-model="registerUser.user_password"
        />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <div class="input_user">
        <input
          type="text"
          placeholder="昵称 非必填~"
          class="input"
          v-model="registerUser.user_nickname"
        />
        <span class="bottom"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="left"></span>
      </div>
      <div class="footer">
        <span @click="appStore.register">返回登录</span>
        <button class="submit" @click="register">注册</button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  import {
    sendMessageRequest,
    registerUserRequest,
    loginUserReuqest,
  } from '@/network/api/user'
  import { verifyEmail, verifyPassword } from '@/utils/verifyInput'
  import { localCache } from '@/utils/cache'
  import Message from 'vue-m-message'
  import useAppStore from '@/store/appStore'
  import useUserStore from '@/store/userStore'

  const appStore = useAppStore()
  const userStore = useUserStore()
  const registerUser = reactive({
    user_email: '',
    user_password: '',
    user_nickname: '',
    code: '',
  })
  const loginUser = reactive({
    user_email: '',
    user_password: '',
  })
  const sendMessage = async () => {
    if (!registerUser.user_email.trim()) return Message.warning('邮箱不能为空~')
    if (!verifyEmail(registerUser.user_email))
      return Message.error('邮箱的格式不正确~')
    const result = await sendMessageRequest(registerUser.user_email)
    Message.success(result.msg)
    const dom = document.querySelector('.send')
    let count = 30
    const timer = setInterval(() => {
      if (count === 0) {
        clearInterval(timer)
        dom.innerHTML = '重新发送'
        dom.disabled = false
      } else {
        count = count - 1
        dom.innerHTML = count
        dom.disabled = true
      }
    }, 1000)
  }
  const register = async () => {
    // 非空验证
    if (!registerUser.user_email.trim()) return Message.warning('邮箱不能为空~')
    if (!registerUser.code) return Message.warning('验证码不能为空~')
    if (!registerUser.user_password.trim())
      return Message.warning('密码不能为空~')
    // 正则
    if (!verifyEmail(registerUser.user_email))
      return Message.info('注册暂时只支持qq邮箱~')
    if (!verifyPassword(registerUser.user_password))
      return Message.info('密码的格式不正确,长度6-15, 至少包含字母和数字~')
    const result = await registerUserRequest(registerUser)
    Message.success(result.msg)
    // 清空表单
    registerUser.code = ''
    registerUser.user_email = ''
    registerUser.user_nickname = ''
    registerUser.user_password = ''
    // 去登录
    appStore.register()
  }
  const login = async () => {
    if (!loginUser.user_email.trim()) return Message.warning('账号不能为空~')
    if (!loginUser.user_password.trim()) return Message.warning('密码不能为空~')
    const result = await loginUserReuqest(loginUser)
    Message.success(result.msg)
    localCache.setCache('user', result.result)
    localCache.setCache('nickname', result.result.user_nickname)
    localCache.setCache('avatar', result.result.avatar_url)
    userStore.logined()
    userStore.nicknameChanged()
    userStore.avatarChanged()
    loginUser.user_email = ''
    loginUser.user_password = ''
    appStore.login()
  }
</script>

<style lang="less" scoped>
  .dialog_main {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 99999;
    background: var(--background-primary) !important;
    width: 450px;
    height: 300px;
    border-radius: 16px;
    .dialog_header {
      width: 100%;
      height: 50px;
      display: flex;
      span {
        &:nth-of-type(1) {
          width: 92%;
        }
      }
    }
    .login {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: calc(100% - 50px);
      .input_user {
        position: relative;
        display: flex;
        height: 42px;
        flex-direction: column;
        width: 88%;
        box-sizing: border-box;
        input {
          width: 100%;
          height: 100%;
          margin: 0;
          box-sizing: border-box;
          color: var(--text-bright);
          font-size: 16px;
          opacity: 0.8;
          background: var(--background-primary);
          transition: background-color 0.3s ease-in-out;
          border: 1px solid var(--text-accent);
          &:focus {
            outline: none;
            border: none;
          }
          &::placeholder {
            color: var(--text-bright);
          }
          &:focus ~ .bottom {
            transform-origin: bottom left;
            transform: scaleX(1);
          }
          &:focus ~ .right {
            transform-origin: bottom right;
            transform: scaleY(1);
          }
          &:focus ~ .top {
            transform-origin: top right;
            transform: scaleX(1);
          }
          &:focus ~ .left {
            transform-origin: top left;
            transform: scaleY(1);
          }
        }

        span {
          position: absolute;
          background-color: var(--text-accent);
          transition: transform 0.5s ease;
        }

        .bottom,
        .top {
          height: 1px;
          left: 0;
          right: 0;
          transform: scaleX(0);
        }

        .left,
        .right {
          width: 1px;
          top: 0;
          bottom: 0;
          transform: scaleY(0);
        }

        .bottom {
          bottom: 0;
          transform-origin: bottom right;
        }
        .right {
          width: 1.5px;
          right: 0;
          transform-origin: top right;
        }
        .top {
          height: 1.5px;
          top: 0;
          transform-origin: top left;
        }
        .left {
          left: 0;
          transform-origin: bottom left;
        }
      }
      .footer {
        display: flex;
        width: 100%;
        span {
          width: 120px;
          font-size: 13px;
          color: var(--text-bright);
          cursor: pointer;
          margin-left: 30px;
          margin-top: 12px;
        }
        .submit {
          padding: 0 42px;
          margin-left: 24px;
          border-radius: 5px;
          background-color: #409eff;
          text-align: center;
          line-height: 40px;
          color: #fff;
          font-size: 16px;
          border: none;
          outline: invert;
          cursor: pointer;
        }
      }
    }
    .register {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: var(--background-primary);
      .email {
        display: flex;
        height: 42px;
        width: 88%;
        box-sizing: border-box;
        div {
          display: flex;
          position: relative;
          align-items: center;
          width: 80%;
          height: 100%;
          input {
            width: 100%;
            height: 100%;
            margin: 0;
            box-sizing: border-box;
            color: var(--text-bright);
            font-size: 16px;
            opacity: 0.8;
            background: var(--background-primary);
            transition: background-color 0.3s ease-in-out;
            border: 1px solid var(--text-accent);
            &:focus {
              outline: none;
              border: none;
            }
            &::placeholder {
              color: var(--text-bright);
            }
            &:focus ~ .bottom {
              transform-origin: bottom left;
              transform: scaleX(1);
            }
            &:focus ~ .right {
              transform-origin: bottom right;
              transform: scaleY(1);
            }
            &:focus ~ .top {
              transform-origin: top right;
              transform: scaleX(1);
            }
            &:focus ~ .left {
              transform-origin: top left;
              transform: scaleY(1);
            }
          }
          span {
            position: absolute;
            background-color: var(--text-accent);
            transition: transform 0.5s ease;
          }

          .bottom,
          .top {
            height: 1px;
            left: 0;
            right: 0;
            transform: scaleX(0);
          }

          .left,
          .right {
            width: 1px;
            top: 0;
            bottom: 0;
            transform: scaleY(0);
          }

          .bottom {
            bottom: 0;
            transform-origin: bottom right;
          }
          .right {
            width: 1.5px;
            right: 0;
            transform-origin: top right;
          }
          .top {
            height: 1.5px;
            top: 0;
            transform-origin: top left;
          }
          .left {
            left: 0;
            transform-origin: bottom left;
          }
        }
        button {
          width: 20%;
          height: 100%;
          font-size: 14px;
          color: var(--text-bright);
          background-color: var(--background-primary);
          border: 1px solid var(--text-accent);
          cursor: pointer;
        }
      }
      .input_user {
        position: relative;
        display: flex;
        height: 42px;
        flex-direction: column;
        width: 88%;
        box-sizing: border-box;
        .input {
          width: 100%;
          height: 100%;
          margin: 0;
          box-sizing: border-box;
          color: var(--text-bright);
          font-size: 16px;
          opacity: 0.8;
          background: var(--background-primary);
          transition: background-color 0.3s ease-in-out;
          border: 1px solid var(--text-accent);
          &:focus {
            outline: none;
            border: none;
          }
          &::placeholder {
            color: var(--text-bright);
          }
          &:focus ~ .bottom {
            transform-origin: bottom left;
            transform: scaleX(1);
          }
          &:focus ~ .right {
            transform-origin: bottom right;
            transform: scaleY(1);
          }
          &:focus ~ .top {
            transform-origin: top right;
            transform: scaleX(1);
          }
          &:focus ~ .left {
            transform-origin: top left;
            transform: scaleY(1);
          }
        }
        span {
          position: absolute;
          background-color: var(--text-accent);
          transition: transform 0.5s ease;
        }

        .bottom,
        .top {
          height: 1px;
          left: 0;
          right: 0;
          transform: scaleX(0);
        }

        .left,
        .right {
          width: 1px;
          top: 0;
          bottom: 0;
          transform: scaleY(0);
        }

        .bottom {
          bottom: 0;
          transform-origin: bottom right;
        }
        .right {
          width: 1.5px;
          right: 0;
          transform-origin: top right;
        }
        .top {
          height: 1.5px;
          top: 0;
          transform-origin: top left;
        }
        .left {
          left: 0;
          transform-origin: bottom left;
        }
      }
      .footer {
        display: flex;
        width: 100%;
        span {
          width: 120px;
          font-size: 13px;
          color: var(--text-bright);
          cursor: pointer;
          margin-left: 30px;
          margin-top: 12px;
        }
        .submit {
          padding: 0 42px;
          margin-left: 24px;
          border-radius: 5px;
          background-color: #409eff;
          text-align: center;
          line-height: 40px;
          color: #fff;
          font-size: 16px;
          border: none;
          outline: invert;
          cursor: pointer;
        }
      }
    }
  }

  @media only screen and (max-width: 990px) {
    .dialog_main {
      width: 90% !important;
    }
  }
</style>
